<template>
  <div>
    <div class="aa" v-if="$store.state.select_anchor_type_data.length === 0 || $store.state.select_anchor_type_data.length === undefined">
      这里没有电台哦
    </div>
    <div v-if="$store.state.select_anchor_type_data.length > 0">
      <!-- 选择电台分类页面的标题 -->
      <div class="title">
        <h2>{{ $store.state.select_anchor_type_data[0].category }}</h2>
      </div>
      <!-- 选择电台分类页面的内容部分 -->
      <div class="content">
        <div
          v-for="(item, index) in $store.state.select_anchor_type_data"
          :key="index"
          :anchorItem="item"
          @click="select_acchor(item)"
        >
          <AnchorItem :anchorItem="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AnchorItem from "../components/AnchorItem.vue";
export default {
  name: "SelectAnchorType",
  components: {
    AnchorItem,
  },
  data(){
    return{
      show1:false
    }
  },
  created() {
    console.log("woshi ",this.$store.state.select_anchor_type_data);
    if(this.$store.state.select_anchor_type_data){

    }
  },
  methods: {
    // 选择电台后得到的数据
    select_acchor(item) {
      this.axios({
        method: "get",
        url: "/dj/detail",
        params: {
          rid: item.id,
        },
      })
        .then((res) => {
          res.data.data.desc = res.data.data.desc.split("\n");
          this.$router.push({ name: "SelectAcchor" });
          this.$store.commit("select_acchor_data", res.data.data);
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
// 选择电台分类页面的内容部分
.content {
  display: flex;
  margin: 10px 0 0 20px;
  flex-wrap: wrap;
  height: 550px;
  overflow-y: auto;
  div {
    flex: 0 50%;
    margin-top: 10px;
  }
}
.aa{
  text-align: center;
  line-height: 640px;
}
</style>